<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1{
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: absolute;
			}
			#box2
			{
				width: 100px;
				height: 100px;
				background-color: blue;
				margin: 200px;
				position: absolute;
			}
			body
			{
				width: 2000px;
				height: 2000px;
			}
			/* 滚动条的问题 */
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				
				var box1=document.getElementById("box1");
				box1.onmousedown=function(event)   //移动上去就要开始计算偏移量了
				{
					//按住进行拖拽，拖拽的时候是按住的 
					//设置box1捕获所有鼠标按下的事件，相当于一直按住它
					/* if(box1.setCapture)
					{
						box1.setCapture();
					};  //一次性捕获，会一直捕获 */
					box1.setCapture&&box1.setCapture();   //前面为真，执行后面
					event=event||window.event;
					var ox=event.clientX-box1.offsetLeft;
					var oy=event.clientY-box1.offsetTop;
					/* var x2=document.body.scrollLeft||document.documentElement.scrollLeft;
						var y2=document.body.scrollTop||document.documentElement.scrollTop; */
						//不需要这个直接就解决了是什么情况，鼠标是相对整个页面，而box1是相对于当前页面
					document.onmousemove=function(event)   //在box1里面移动才可以动，那还怎么动 只能往下移动
					{
						event=event||window.event;
						
						var x1=event.clientX-ox;   /* 是div的偏移量*/
						var y1=event.clientY-oy;   /* 是div的偏移量什么情况，下面的不也是吗*/
						
						box1.style.left=x1+"px";
						box1.style.top=y1+"px";
						
					}
					document.onmouseup=function()
					{
						document.onmousemove=null;
						document.onmouseup=null;
						//当鼠标松开，取消对事件的捕获
						/* //if(box1.releaseCapture)
						{
							box1.releaseCapture();
						} */
						
					}
					//当我们拖拽一个网页中的内容时，浏览器会默认去除搜索引擎中搜索内容
					//此时会导致拖拽功能的异常，这个是浏览器提供的默认行为
					//如果不希望发生这个行为，可以通过return false来取消默认行为
					return false;    //ie8及以下不支持
				}
			}
		</script>
	</head>
	<body>
		<p>这是一段文字</p>
		<div id="box1"></div>
		<div id="box2"></div>
		
	</body>
</html>